<!Doctype html>
<html>

<head>
    <title>oixan的博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/blog.css">
</head>

<body>
    <div class="head">
        <div class="headnav">
            <div class="naveframe">
                <ul class="navlist">
                    <li>
                        <a href="../index.html">
                            主页
                        </a>
                    </li>
                    <li>
                        <a href="../bloglist.html">
                            博客
                        </a>
                    </li>
                    <li>
                        <a href="../about.html">
                            关于
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="headtext">
            <div class="headtext1">世界很简单，人类很复杂。</div>
            <div class="headtext2">浮生若梦，寻寻觅觅。</div>
        </div>
    </div>

    <div class="contents-all">
        <div class="contents">

            <div class="frame">
                <div class="title">
                    <h3>珠海长隆海上王国相片展示</h3>
                </div>
                <div class="dtime">时间：2018-06-08</div>
                <div class="detail">

                    <style type="text/css">
						.photoview {
							position: relative;
							background-color: #f2eada;
							margin: 2px;
							padding: 10px 10px 20px 10px;
							text-align: center;
							font-size: 20px;
							box-shadow: .2em .2em .8em #130c0e;
							/*给照片添加阴影效果，富有立体感*/
						}
						.photoview img{
							width: 100%;
						}

						.photoview p {
							margin-top: 5px;
							/*设置照片内显示文字段落的外上边距*/
						}
						/*
						[class*=photo]{
							display: -webkit-box;
							display: -moz-box;
							display: box;

							-webkit-box-pack: center;
							-moz-box-pack: center;
							-o-box-pack: center;
							-ms-box-pack: center;
							box-pack: center;

							-webkit-box-align: center;
							-moz-box-align: center;
							-o-box-align: center;
							-ms-box-align: center;
							box-align: center;
						}
						*/

						.photo01 {
							width:50%;
							position: relative;
							margin-top: 25%;
							margin-left: 25%; 

							display: -webkit-box;
							/*使用CSS3的盒模型之流式布局*/
							display: -moz-box;
							display: box;

							-webkit-box-pack: center;
							/*定义盒模型内部元素在水平方向上居于中间位置*/
							-moz-box-pack: center;
							-o-box-pack: center;
							-ms-box-pack: center;
							box-pack: center;

							-webkit-box-align: center;
							/*定义盒模型内部元素在垂直方向上居于中间位置*/
							-moz-box-align: center;
							-o-box-align: center;
							-ms-box-align: center;
							box-align: center;
							


							-weikit-transform-origin: left bottom;
							/*设置右下角为旋转基准点 */
							-moz-transform-origin: left bottom;
							-o-transform-origin: left bottom;
							-ms-transform-origin: left bottom;
							transform-origin: left bottom;

							transform: rotate(-20deg);
							/*以右下角为基准点顺时针旋转10°*/
							-webkit-transform: rotate(-20deg);
							-moz-transform: rotate(-20deg);
							-o-transform: rotate(-20deg);
							-ms-transform: rotate(-20deg);
						}


						.photo02 {
							width:50%;
							position: relative;
							margin-top: 5%;
							margin-left: 25%; 
							display: -webkit-box;

							display: -webkit-box;
							/*使用CSS3的盒模型之流式布局*/
							display: -moz-box;
							display: box;

							-webkit-box-pack: center;
							/*定义盒模型内部元素在水平方向上居于中间位置*/
							-moz-box-pack: center;
							-o-box-pack: center;
							-ms-box-pack: center;
							box-pack: center;

							-webkit-box-align: center;
							/*定义盒模型内部元素在垂直方向上居于中间位置*/
							-moz-box-align: center;
							-o-box-align: center;
							-ms-box-align: center;
							box-align: center;
							

							-weikit-transform-origin: right top;
							/*设置右下角为旋转基准点 */
							-moz-transform-origin: right top;
							-o-transform-origin: right top;
							-ms-transform-origin: right top;
							transform-origin: right top;

							transform: rotate(20deg);
							/*以右下角为基准点逆时针旋转20°*/
							-webkit-transform: rotate(20deg);
							-moz-transform: rotate(20deg);
							-o-transform: rotate(20deg);
							-ms-transform: rotate(20deg);
						}




						.photo03 {
							width:50%;
							position: relative;
							margin-top: 5%;

							display: -webkit-box;
							/*使用CSS3的盒模型之流式布局*/
							display: -moz-box;
							display: box;

							-webkit-box-pack: center;
							/*定义盒模型内部元素在水平方向上居于中间位置*/
							-moz-box-pack: center;
							-o-box-pack: center;
							-ms-box-pack: center;
							box-pack: center;

							-webkit-box-align: center;
							/*定义盒模型内部元素在垂直方向上居于中间位置*/
							-moz-box-align: center;
							-o-box-align: center;
							-ms-box-align: center;
							box-align: center;
							

							-weikit-transform-origin: left top;
							/*设置左上角为旋转基准点 */
							-moz-transform-origin: left top;
							-o-transform-origin: left top;
							-ms-transform-origin: left top;
							transform-origin: left top;

							transform: rotate(-20deg);
							/*以左上角为基准点顺时针旋转20°*/
							-webkit-transform: rotate(-20deg);
							-moz-transform: rotate(-20deg);
							-o-transform: rotate(-20deg);
							-ms-transform: rotate(-20deg);
						}

						.photo04 {
							width:50%;
							position: relative;
							margin-top: 5%;
							margin-left: 25%; 

							display: -webkit-box;
							/*使用CSS3的盒模型之流式布局*/
							display: -moz-box;
							display: box;

							-webkit-box-pack: center;
							/*定义盒模型内部元素在水平方向上居于中间位置*/
							-moz-box-pack: center;
							-o-box-pack: center;
							-ms-box-pack: center;
							box-pack: center;

							-webkit-box-align: center;
							/*定义盒模型内部元素在垂直方向上居于中间位置*/
							-moz-box-align: center;
							-o-box-align: center;
							-ms-box-align: center;
							box-align: center;
							

							-weikit-transform-origin: right top;
							/*设置左下角为旋转基准点 */
							-moz-transform-origin: right top;
							-o-transform-origin: right top;
							-ms-transform-origin: right top;
							transform-origin: right top;

							transform: rotate(20deg);
							/*以左下角为基准点逆时针旋转20°*/
							-webkit-transform: rotate(20deg);
							-moz-transform: rotate(20deg);
							-o-transform: rotate(20deg);
							-ms-transform: rotate(20deg);
						}

						.photo05 {
							width:50%;
							position: relative;
							margin-top: 5%;
							margin-left: 25%; 

							display: -webkit-box;
							/*使用CSS3的盒模型之流式布局*/
							display: -moz-box;
							display: box;

							-webkit-box-pack: center;
							/*定义盒模型内部元素在水平方向上居于中间位置*/
							-moz-box-pack: center;
							-o-box-pack: center;
							-ms-box-pack: center;
							box-pack: center;

							-webkit-box-align: center;
							/*定义盒模型内部元素在垂直方向上居于中间位置*/
							-moz-box-align: center;
							-o-box-align: center;
							-ms-box-align: center;
							box-align: center;

							

							-weikit-transform-origin: left bottom;
							/*设置右下角为旋转基准点 */
							-moz-transform-origin: left bottom;
							-o-transform-origin: left bottom;
							-ms-transform-origin: left bottom;
							transform-origin: left bottom;

							transform: rotate(-20deg);
							/*以右下角为基准点顺时针旋转10°*/
							-webkit-transform: rotate(-20deg);
							-moz-transform: rotate(-20deg);
							-o-transform: rotate(-20deg);
							-ms-transform: rotate(-20deg);
						}
					</style>
                   
	
		<div class="photo01">
			<div class="photoview" >
				<img src="../img/blogimg/20190302qie.jpg" >
				<p>企鹅</p>
				<p>oisan</p>
			</div>
		</div>
		
		<div class="photo02">
			<div class="photoview" >
				<img src="../img/blogimg/20190302yu.jpg"  >
				<p>鲸鱼</p>
				<p>oisan</p>
			</div>
		</div>
		
		<div class="photo03">
			<div class="photoview" >
				<img src="../img/blogimg/20190302zyu.jpg"  >
				<p>八爪鱼</p>
				<p>oisan</p>
			</div>
		</div>
		
		<div class="photo04">
			<div class="photoview" >
				<img src="../img/blogimg/20190302chuan.jpg"  >
				<p>海盗船</p>
				<p>oisan</p>
			</div>
        </div>
        
        <div class="photo05">
                <div class="photoview" >
                    <img src="../img/blogimg/20190302hua.jpg"  >
                    <p>烟花</p>
                    <p>oisan</p>
                </div>
            </div>
	    

                        

                </div>
<a href="javascript:void(0)" onclick="showPg()">返回</a>
            </div>


        </div>
    </div>
    <div class="footer">
        <div class="footertext">©2018,oixan博客</div>
    </div>
	<span id="backtop" onclick="topFunction()">返回顶部</span>
</body>
<script  src="../js/fanhuiye.js"></script>
</html>